<template>
  <div class="photoinfo-container">
        <h3 class="title">{{photoinfolist.title}}</h3>
        <p class="info">
            <span>发表时间：{{ photoinfolist.add_time | dateFilter }}</span>
            <span>点击：{{photoinfolist.click}}</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumb-img-list">
            <vue-preview :slides="thumbsList" @close="handleClose"></vue-preview>
        </div>
        <!-- 内容区域 -->
        <div class="content" v-html="photoinfolist.content"></div>

        <!-- 评论子组件 -->
        <comment :newsId="id"></comment>
  </div>
</template>

<script>
// 导入评论子组件
import comment from "../sub-component/Comment.vue"
export default {
    data(){
        return {
            photoinfolist:{},
            thumbsList: [],
        }
    },
    created:function(){
        this.getPhotoInfo(),
        this.getThumbImg()
    },
    methods:{
        async getPhotoInfo(){
            //当调用一个异步方法，同时这个异步方法返回值是promise对象地时候，才可以使用awiat和async
           const {data}= await this.$http.get('/api/getimageInfo/'+this.id);
           if(data.status===0) return this.photoinfolist=data.message[0];
        //    console.log(this.photoinfolist);
        },
        async getThumbImg(){
            const {data}=await this.$http.get("/api/getthumimages/"+this.id);
            if(data.status===0){
                data.message.forEach(item => {
                    item.w=600;
                    item.h=400;
                    item.msrc=item.src;
                });
                this.thumbsList=data.message;
                console.log(this.thumbsList);
            }
        },
        handleClose () {
        console.log('close event')
      }
    },
    props:['id'],
    components:{
        comment
    }
}
</script>

<style lang="scss" scoped>
.photoinfo-container {
    padding: 3px;
}
.title {
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
    color: #26a2ff;
}
.info {
    font-size: 13px;
    display: flex;
    justify-content: space-between;
}
.content {
    font-size: 13px;
    line-height: 30px;
}
.thumb-img-list {
    /deep/ .my-gallery {
      //deep深层作用选择器
      display: flex;
      flex-wrap: wrap; //默认换行
      figure {
        width: 30%;
        margin: 5px;
        img {
          width: 100%;
          box-shadow: 0 0 8px #999;
          border-radius: 5px;
        }
      }
    }
  }

</style>